Loading data in grid
dhtmlxGrid supports different types of data sources:
- xml;
- csv;
- json;
- javascript array.
dhtmlxGrid 1.5 supported only loading from XML|CSV, and used the following methods for it:
grid.loadXML(url) - loads data from a remote file;
grid.loadXMLString(string); - loads data from a js string;
grid.parseXML(object); - loads data from an xml object (xmlhttprequest or XML island);
grid.loadCSV(url) - loads data from a remote file;
grid.loadCSVString(string); - loads data from a js string.
Starting from dhtmlxGrid 1.6 the new common loaders were implemented (old API is still supported, but it is highly recommended to use the new API):
grid.load(url) - loads data from a remote file, xml is expected by default;
grid.load(url,"csv") - the same for csv format;
grid.load(url,"json") - the same for json format;
grid.load(url,"jsarray") - the same for jsarray format.
grid.parse(object) - loads data from a string|object, xml is expected by default;
grid.parse(url,"csv") - the same for csv format;
grid.parse(url,"json") - the same for json format;
grid.parse(url,"jsarray") - the same for jsarray format.
Loading from CSV
To load data from a remote file (static csv file or any kind of script which will generate csv output):
grid.load(url,"cvs");
or
grid.load(url,callback,"csv"); // callback is an optional function, which will be called after the data is loaded and processed
To load data from a CSV string:
var csvstr="11,12,13\n21,22,23\n,31,32,33";
grid.parse(csvstr,"csv");
By default the component will use:
, - cell delimiter;
\n - row delimiter.
These values can be changed as:
grid.csv.row="any row delimiter";
grid.csv.cell ="any cell delimiter";
Loading from JSArray
To load data from a remote file (a static js file or any kind of script which will generate jsarray output):
grid.load(url,"jsarray");
or
grid.load(url,callback,"jsarray"); // a callback is an optional function, which will be called after the data is loaded and processed
To load data from JSArray object:
var ar = [[11,12,13],[21,22,23],[31,32,33]]
grid.parse(ar,"jsarray");
Loading data from JSON
To load data from a remote file (a static json file or any kind of script which will generate json output):
grid.load(url,"json");
or
grid.load(url,callback,"json"); // a callback is an optional function, which will be called after the data is loaded and processed
To load data from JSON object:
var js={
rows:[
{ id:1001,
data:[
"100",
"A Time to Kill",
"John Grisham",
"12.99",
"1",
"05/01/1998"] },
{ id:1002,
data:[
"1000",
"Blood and Smoke",
"Stephen King",
"0",
"1",
"01/01/2000"] }
]}
grid.parse(js,"json");
Details about used JSON format
Top level object contains a collection of rows, each row has a mandatory data array containing data for all cells.
Each row representing an object may contain additional parameters; they will affect the grid in the same manner as attributes of row tag in case of loading from XML.
{ id:1002,
selected:true, // selected row
style:"color:red;" // assigned style
data:[
"1000",
"Blood and Smoke",
"Stephen King",
Loading from XML
To load data from a remote file (static xml file or any kind of script which will generate xml output):
grid.load(url);
or
grid.load(url,callback); // a callback is an optional function, which will be called after the data is loaded and processed.
To load data from an XML object or an XML string:
grid.parse(xml_object);
or
grid.parse(xml_string);
The default XML format is the following:
<rows>
<row id="some">
<cell > data </cell>
You can change used tags names like this:
grid.xml.top="mytop"
grid.xml.row="./myrow"
grid.xml.cell="./mycell"
In such case the grid will expect the xml to be written in the following format:
<mytop>
<myrow id="some">
<mycell> data </mycell>
The row and cell parameters are XPaths, so you can create more complex schemes:
grid.xml.top="mytop"
grid.xml.row="./some/myrow"
grid.xml.cell="./mycell[@show=true]"
<mytop>
<some>
<myrow id="some">
<mycell> will not be used </mycell>
<mycell show="true"> data </mycell>
Grid supports two additional XML formats, which are based on column IDs (ext/dhtxmlgrid_data.js).
xmlA
grid.setColumnIds("first,second,third")
grid.load(url,"xmlA")
....
<rows>
<row id="some" first="11" second="12" third="13" />
<row id="some" first="21" second="22" third="23" />
<row id="some" first="31" second="32" third="33" />
</rows>
(If you are using MSSQL you can use SELECT * FROM Some FOR XML AUTO to get data exactly in the necessary format)
xmlB
grid.setColumnIds("first,second,third")
grid.load(url,"xmlA")
....
<rows>
<row id="some"><first>11</first><second>12</second><third>13</third></row>
<row id="some"><first>21</first><second>22</second><third>23</third></row>
<row id="some"><first>31</first><second>32</second><third>33</third></row>
</rows>
Both formats can be customized in the same manner as the default xml format.
Control over XML serialization
The tags used for rows and cells during the serialization can be defined as:
grid.xml.s_row="myrowtag";
grid.xml.s_cell="mycelltag";
The grid uses some predefined set of attributes which will be included in the serialization, but if you are using some custom attributes, you can force their including in the serialization.
grid.setRowAttribute(id,"custom1","data");
...
grid.xml.row_attrs.push("custom1"); //will include custom1 in the serialization
grid.cells(i,j).setAttribute("custom2","data");
...
grid.xml.cell_attrs.push("custom2"); //will include custom2 in the serialization
© DHTMLX, 2008